import React from 'react'
import { Flex } from 'react-vant'
import { useNavigate } from 'react-router-dom'
import images from './assets/images'

export default function Index() {
  const navigate = useNavigate()
  const you = () => {
    navigate(`/xue?type=1`)
  }
  const zhong = () => {
    navigate(`/xue?type=2`)
  }
  const gao = () => {
    navigate(`/xue?type=3`)
  }
  const ming = () => {
    navigate(`/xue?type=4`)
  }
  return (
    <div>
      <div style={{ backgroundColor: '#8EDA93', width: '100%', height: '180px', color: 'white', textAlign: 'center' }}>
        <h3 style={{ paddingTop: "40px" }}>校园食品安全监督平台</h3>
        <p>共接入<span style={{ fontSize: '30px' }}>20</span>所学校</p>
      </div>
      <Flex justify='center' align='center'>
        <div onClick={() => { you() }} style={{ display: 'flex', flexFlow: 'column', alignItems: 'center', width: "150px", height: "150px", textAlign: 'center', lineHeight: "150px", margin: "10px 10px 10px 10px", boxShadow: "10px 10px 20px gray", border: '1px' }}>
          <img src={images.img2} width={70} height={70} alt=""/>
          <div style={{ position: 'relative', bottom: '40px' }}>幼儿园</div>
        </div>
        <div onClick={() => { zhong() }} style={{ display: 'flex', flexFlow: 'column', alignItems: 'center', width: "150px", height: "150px", textAlign: 'center', lineHeight: "150px", margin: "10px 10px 10px 10px", boxShadow: "10px 10px 20px gray", border: '1px' }}>
          <img src={images.img2} width={70} height={70} alt=""/>
          <div style={{ position: 'relative', bottom: '40px' }}>中小学</div>
        </div>
      </Flex>
      <Flex justify='center' align='center'>
        <div onClick={() => { gao() }} style={{ display: 'flex', flexFlow: 'column', alignItems: 'center', width: "150px", height: "150px", textAlign: 'center', lineHeight: "150px", margin: "10px 10px 10px 10px", boxShadow: "10px 10px 20px gray", border: '1px' }}>
          <img src={images.img2} width={70} height={70} alt=""/>
          <div style={{ position: 'relative', bottom: '40px' }}>高校</div>
        </div>
        <div onClick={() => { ming() }} style={{ display: 'flex', flexFlow: 'column', alignItems: 'center', width: "150px", height: "150px", textAlign: 'center', lineHeight: "150px", margin: "10px 10px 10px 10px", boxShadow: "10px 10px 20px gray", border: '1px' }}>
          <img src={images.img2} width={70} height={70} alt=""/>
          <div style={{ position: 'relative', bottom: '40px' }}>名办院校</div>
        </div>
      </Flex>
      <div>
      </div>
    </div>
  )
}